<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="时间范围" prop="searchDateRange">
        <el-date-picker clearable size="small"
                        @change="drawMixingWaterVolumeChart"
                        v-model="queryParams.searchDateRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="drawMixingWaterVolumeChart">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--<td style="width: 200px" >p1水分：{{p1Water}}</td><td style="width: 200px" >p1料温：{{p1Temp}}</td>-->
    <tr><td style="width: 200px" >一混水分：{{decimal(mixWaterOne,1)}}</td><td style="width: 200px" >一混料温：{{decimal(mixTempOne,1)}}</td><td style="width: 200px" >二混水分：{{decimal(mixWaterTwo,1)}}</td><td style="width: 200px" >二混料温：{{decimal(mixTempTwo,1)}}</td><td style="width: 200px" >H1水分：{{decimal(p1Water,1)}}</td><td style="width: 200px" >H1料温：{{decimal(p1Temp,1)}}</td></tr>
    <el-row :gutter="10" class="mb8" style="width: 100%;margin: 0 auto;margin-top: 20px">
      <el-col :span="8">  <dv-border-box-7><div ref="inFrontChart" style="width: 100%;height: 500px"></div> </dv-border-box-7>  </el-col>
      <el-col :span="8">  <dv-border-box-7><div ref="mixingWaterOChart" style="width: 100%;height: 500px"></div> </dv-border-box-7>  </el-col>
      <el-col :span="8">  <dv-border-box-7><div ref="mixingWaterWChart" style="width: 100%;height: 500px"></div> </dv-border-box-7>  </el-col>
    </el-row>
  </div>
</template>
<script>
  import {getHisChart,getRealDataByTags, getMixingDataNow} from '@/api/app/plc/cache'
  import * as echarts from 'echarts'
  import moment from "moment/moment";
  export default {
    props:{
      mixingWaterVolume: String,
    },
    data() {
      return {
        p1Water: null,
        p1Temp: null,
        mixWaterOne: null,
        mixTempOne: null,
        mixWaterTwo: null,
        mixTempTwo: null,
        timer: null,
        selectDate: '',
        mixingWaterVolumeList: [],
        queryParams: {
          searchDateRange: [this.moment().subtract('hours', 2).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        },
      }
    },
    created() {
      this.drawMixingWaterVolumeChart();
      this.timer = setInterval(() => {
        this.getMixingDataNow()
      }, 1000)
    },
    beforeDestroy() {
      this.timer && clearInterval(this.timer)
      this.timer=null;
    },
    methods: {
      getMixingDataNow() {
        getMixingDataNow().then(res => {
          this.p1Water = res.data.p1Water
          this.p1Temp = res.data.p1Temp
          this.mixWaterOne = res.data.mixWaterOne
          this.mixTempOne = res.data.mixTempOne
          this.mixWaterTwo = res.data.mixWaterTwo
          this.mixTempTwo = res.data.mixTempTwo
        })
      },
      drawMixingWaterVolumeChart() {
        let data = {};
        if (this.queryParams.searchDateRange) {
          data = {
            startDt: this.queryParams.searchDateRange[0],
            endDt: this.queryParams.searchDateRange[1]
          }
          data.codes = "st6_yh_sf"+ ","+"st6_yh_lw"  + "," +"st6_eh_sf" + ","+"st6_eh_lw"+ ","+"st6_sec_mix_add_water"+ ","+"st6_sec_mix_temp_value"
          let colorList = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956', '#AA069F', '#FD0100', '#FC7D02', '#93CE07', '#E76264', '#B473D2', '#724488', '#9A60B4', '#B94F51', '#FC8251']
          getHisChart(data).then(response => {
            this.$nextTick(() => {
              let eList = response.data
              let series1 = [],series2=[],series3=[]
              let list1 = [], list2 = [], list3 = [], list4 = [], list5 = [], list6 = [], list7 = [], list8 = [],
                list9 = [], list10 = [], list11 = [], list12 = [], list13 = [], list14 = [], list15 = []
              let nameList = [], xdata = []
              //第一条数据
              nameList.push(eList[0].name)
              nameList.push(eList[1].name)
              nameList.push(eList[2].name)
              nameList.push(eList[3].name)
              nameList.push(eList[4].name)
              nameList.push(eList[5].name)
              for (let a = 0; a < eList[0].list.length; a++) {
                list1.push(eList[0].list[a].value)
                xdata.push(moment(eList[0].list[a].dt).format('HH:mm:ss'))
                list2.push(eList[1].list[a].value)
                list3.push(eList[2].list[a].value)
                list4.push(eList[3].list[a].value)
                list5.push(eList[4].list[a].value)
                list6.push(eList[5].list[a].value)
              }

              series1.push({
                showSymbol: false,
                name: nameList[0],
                data: list1,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[0]}
              })
              series1.push({
                showSymbol: false,
                name: nameList[1],
                data: list2,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[1]}
              })
              series2.push({
                showSymbol: false,
                name: nameList[2],
                data: list3,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[2]}
              })
              series2.push({
                showSymbol: false,
                name: nameList[3],
                data: list4,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[3]}
              })
              series3.push({
                showSymbol: false,
                name: nameList[4],
                data: list5,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[6]}
              })
              series3.push({
                showSymbol: false,
                name: nameList[5],
                data: list6,
                type: 'line',
                smooth: true,
                itemStyle: {color: colorList[7]}
              })

              let chart1 = echarts.init(this.$refs.mixingWaterOChart)
              let option1 = {
                backgroundColor: 'transparent',
                /** 保存echart图片 **/
                grid: {
                  left: 30,
                  right: 40,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                      type: 'dotted',
                      //color: ['#aaa', '#ddd']
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#000'
                    },
                  },
                  // min: function (val) {
                  //   return parseInt(val.min - 20)
                  // },
                  // max: function (val) {
                  //   return parseInt(val.max + 20)
                  // },
                },{
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                      type: 'dotted',
                      //color: ['#aaa', '#ddd']
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#000'
                    },
                  },
                  // min: function (val) {
                  //   return parseInt(val.min - 20)
                  // },
                  // max: function (val) {
                  //   return parseInt(val.max + 20)
                  // },
                },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series1
              }
              chart1.setOption(option1, true)

              let chart2 = echarts.init(this.$refs.mixingWaterWChart)
              let option2 = {
                backgroundColor: 'transparent',
                /** 保存echart图片 **/
                grid: {
                  left: 30,
                  right: 40,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    // min: function (val) {
                    //   return parseInt(val.min - 20)
                    // },
                    // max: function (val) {
                    //   return parseInt(val.max + 20)
                    // },
                  },{
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    // min: function (val) {
                    //   return parseInt(val.min - 20)
                    // },
                    // max: function (val) {
                    //   return parseInt(val.max + 20)
                    // },
                  },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series2
              }
              chart2.setOption(option2, true)

              let chart3 = echarts.init(this.$refs.inFrontChart)
              let option3 = {
                backgroundColor: 'transparent',
                /** 保存echart图片 **/
                grid: {
                  left: 30,
                  right: 40,
                  bottom: 20,
                  containLabel: true
                },
                "backgroundColor": "rgba(0, 0, 0, 0)",
                dataZoom: {
                  type: 'inside',
                  zoomOnMouseWheel: true,
                },
                xAxis: {
                  type: 'category',
                  data: xdata,
                },
                yAxis: [
                  {
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    // min: function (val) {
                    //   return parseInt(val.min - 20)
                    // },
                    // max: function (val) {
                    //   return parseInt(val.max + 20)
                    // },
                  },{
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dotted',
                        //color: ['#aaa', '#ddd']
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: '#000'
                      },
                    },
                    // min: function (val) {
                    //   return parseInt(val.min - 20)
                    // },
                    // max: function (val) {
                    //   return parseInt(val.max + 20)
                    // },
                  },],
                tooltip: {
                  trigger: 'axis', //设置tip提示
                  axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                legend: {
                  left: 'center',
                  textStyle: {
                    size: 14,
                  },
                  type: 'scroll',
                  pageIconColor: '#ffffff', //图例分页左右箭头图标颜色
                  pageTextStyle: {
                    color: '#ffffff', //图例分页页码的颜色设置
                  },
                  pageIconSize: 12,  //当然就是按钮的大小
                  pageIconInactiveColor: '#7f7f7f',  // 禁用的按钮颜色
                },
                series: series3
              }
              chart3.setOption(option3, true)
            })
          })
        }
      },
    }
  }
</script>
